<template>
    <div class="py1">
        <a-row>
            <a-col :span="6">
                <a-card ><a-statistic title="活跃用户" :value="112893" style="margin-right: 50px" /></a-card>
            </a-col>
            <a-col :span="6">
                <a-card class="ml1"><a-statistic title="昨日登录用户" :precision="2" :value="112893" /></a-card>
            </a-col>
            <a-col :span="6">
                <a-card class="ml1"><a-statistic title="本月登录用户" :precision="2" :value="112893" /></a-card>
            </a-col>
            <a-col :span="6">
                <a-card class="ml1"><a-statistic title="昨日盈利" :precision="2" :value="100367" /></a-card>
            </a-col>
        </a-row>
        <a-card class="mt2">
            <h1 class="f3 baseColor" style="font-weight:550">客户增长情况统计</h1>
            <div ref="echart" class="echart"></div>
        </a-card>
    </div>
</template>

<script lang='ts'>
import { defineComponent,ref,reactive,toRefs,onMounted} from 'vue'
import emitter from "/@/model/eventBus"
import * as echarts from 'echarts';
interface DataProps {}
export default defineComponent({
    name: '',
    setup(props,context) {
        const echart=ref()
        
        const data: DataProps = reactive({

        })
        onMounted(() => {
            var myChart = echarts.init(echart.value);
            // 绘制图表
            myChart.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '邮件营销',
                        type: 'line',
                        stack: '总量',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: '联盟广告',
                        type: 'line',
                        stack: '总量',
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: '视频广告',
                        type: 'line',
                        stack: '总量',
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: '直接访问',
                        type: 'line',
                        stack: '总量',
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name: '搜索引擎',
                        type: 'line',
                        stack: '总量',
                        data: [820, 932, 901, 934, 1290, 1330, 1320]
                    }
                ]
            });
        })
        const refData = toRefs(data);
        return {
            ...refData,
            echart
        }

    }
});
</script>
<style lang='scss' scoped>
    .echart{width:90%;height: 400px;}
</style>